<div>
    <h2 translate="audits.title">Audits</h2>

    <div class="row">
        <div class="col-md-5">
            <h4 translate="audits.filter.title">Filter by date</h4>
            <p class="input-group">
                <span class="input-group-addon" translate="audits.filter.from">from</span>
                <input type="date" class="input-sm form-control" name="start" ng-model="fromDate" ng-change="onChangeDate()" required/>
                <span class="input-group-addon" translate="audits.filter.to">to</span>
                <input type="date" class="input-sm form-control" name="end" ng-model="toDate" ng-change="onChangeDate()" required/>
            </p>
        </div>
    </div>


    <table class="table table-condensed table-striped table-bordered table-responsive">
        <thead>
        <tr>
            <th ng-click="predicate = 'timestamp'; reverse=!reverse">{{'audits.table.header.date' | translate}}</th>
            <th ng-click="predicate = 'principal'; reverse=!reverse">{{'audits.table.header.principal' | translate}}</th>
            <th ng-click="predicate = 'type'; reverse=!reverse">{{'audits.table.header.status' | translate}}</th>
            <th ng-click="predicate = 'data.message'; reverse=!reverse">{{'audits.table.header.data' | translate}}</th>
        </tr>
        </thead>

        <tr ng-repeat="audit in audits | filter:filter | orderBy:predicate:reverse" ng-hide="audit.filtered">
            <td><span>{{audit.timestamp| date:'medium'}}</span></td>
            <td><small>{{audit.principal}}</small></td>
            <td>{{audit.type}}</td>
            <td>
                <span ng-show="audit.data.message">{{audit.data.message}}</span>
                <span ng-show="audit.data.remoteAddress">{{'audits.table.data.remoteAddress' | translate}} {{audit.data.remoteAddress}}</span>
            </td>
        </tr>
    </table>
</div>